<template>
  <div>
    <p class="title">广播列表</p>

    <div class="search-box">
      <div class="left-box">
        <div>
          <span>状态：</span>
          <el-select v-model="query.state" @change="search" placeholder="全部" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <span>是否推荐：</span>
          <el-select v-model="query.rec" @change="search" placeholder="全部" size="small">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <el-input v-model="query.content" @change="search" clearable size="small" prefix-icon="el-icon-search"
        placeholder="搜索广播名称">
      </el-input>

    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="$router.push('/home/Addradio')">新建</el-button>
    </div>
    <!-- 动态列表 -->
    <el-table :data="tableData" border>

      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column prop="broName" label="广播名称" width="300" align="center">
      </el-table-column>
      <el-table-column prop="btName" label="类型" width="200" align="center">
      </el-table-column>
      <el-table-column prop="colls" label="收藏人数" align="center"> </el-table-column>
      <el-table-column prop="playVolume" label="播放量" align="center">
      </el-table-column>
      <el-table-column label="是否推荐" align="center">
        <template slot-scope="scope">
          {{scope.row.rec=='1'? '已推荐':'未推荐'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{scope.row.state=='1'? '上架':'下架'}}
        </template>
      </el-table-column>
      <el-table-column prop="orders" label="排序" align="center"> </el-table-column>
      <el-table-column prop="operate" label="操作" @click="del(1)" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click="$router.push({path:'/Home/RadioDetails',query:{broId:scope.row.broId}})" type="text"
            size="small">查看</el-button>
          <el-button @click="$router.push({path:'/Home/Addradio',query:{broId:scope.row.broId}})" type="text"
            size="small">编辑</el-button>
          <el-button @click="updateBroadcast(scope.row.broId,scope.row.rec,scope.$index)" type="text" size="small">
            {{scope.row.rec=='1'? '取消推荐':'推荐'}}
          </el-button>
          <el-button @click="updateBroadcastState(scope.row.broId,scope.row.state,scope.$index)" type="text" size="small">
            {{scope.row.state=='1'? '下架':'上架'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize"
      @current-change="changeCurrentPage" @size-change="handleSizeChange">
    </Page>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import Radiotab from "@/components/Radiotab.vue";
  import apis from "@/apis/modules/radio";
  export default {
    components: {
      Radiotab,
      Page,
    },
    data() {
      return {
        query: {
          state: "all",//	状态 all 全部 1 上架 2下架
          rec: "all",//	推荐 all 全部 1 推荐 0 不推荐
          content: "",//搜索内容
          pageNumber: 1,//当前页数
          pageSize: 10,//每页显示多少条
        },

        total: 0,
        tableData: [],
        options: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "已上架",
          },
          {
            value: "2",
            label: "已下架",
          },
        ],
        options2: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "已推荐",
          },
          {
            value: "2",
            label: "未推荐",
          },
        ],
      };
    },
    mounted() {
      this.getBroadcast();
    },
    methods: {
      add() {
        this.$router.push("/home/Addradio");
      },
      // 搜索
      search() {
        this.query.pageNumber = 1;
        this.getBroadcast()
      },
      //获取广播列表
      async getBroadcast() {

        const { code, data, msg } = await apis.getBroadcast(this.query)
        if (code == 200) {
          this.tableData = data.list;
          this.total = data.count;
        }

      },
      // 取消推荐/推荐
      async updateBroadcast(broId, rec, index) {
        rec = rec == 1 ? 2 : 1
        const { code, data, msg } = await apis.updateBroadcast({
          broId,
          rec
        })
        if (code == 200) {
          this.tableData[index].rec =rec
            this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      },
      // 上架/下架
      async updateBroadcastState(broId, state, index) {
     
       state= state == 1 ? 2 : 1
        const { code, data, msg } = await apis.updateBroadcastState({
          broId,
          state 
        })
        if (code == 200) {
          this.tableData[index].state =state

          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getBroadcast();
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getBroadcast();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-box {
    display: flex;
    align-items: center;

    div:first-child {
      margin-right: 32px;
    }
  }

  .btn {
    margin: 16px 0;
    text-align: right;
  }

  .el-input {
    width: 300px;
  }
</style>